<template>
  <div class="NewActivity"><h3>新建折扣活动</h3></div>
  <div class="BasicInformation">
    <p>基础信息</p>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="活动名称">
        <el-input placeholder="请输入" />
      </el-form-item>

      <div class="demo-date-picker">
        <span>活动日期</span>
        <el-date-picker
          v-model="value"
          type="date"
          placeholder="Pick a day"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
        >
          <template #default="cell">
            <div class="cell" :class="{ current: cell.isCurrent }">
              <span class="text">{{ cell.text }}</span>
              <span v-if="isHoliday(cell)" class="holiday" />
            </div>
          </template>
        </el-date-picker>
      </div>
      <div class="DiscountOverlay">
        <span>优惠叠加</span>
        <el-radio-group v-model="radio">
          <el-radio :label="3">叠加</el-radio>
          <el-radio :label="6">不叠加</el-radio>
        </el-radio-group>
      </div>
      <div class="DiscountOverlay">
        <span>商品限购</span>
        <el-radio-group v-model="radio">
          <el-radio :label="3">不限购</el-radio>
          <el-radio :label="6">最多购买</el-radio>
        </el-radio-group>
      </div>
    </el-form>
  </div>
  <div class="DiscountProductList">
    <p>折扣商品列表</p>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="商品信息" width="180" />
      <el-table-column prop="name" label="原价(元)" width="180" />
      <el-table-column prop="discount" label="折扣" width="180" />
      <el-table-column prop="discount-price" label="折扣价" width="180" />
      <el-table-column prop="delete" label="删除" width="180" />
    </el-table>
  </div>
</template>

<script setup lang="ts">

const radio = ref(3);

import type { FormInstance } from "element-plus";
import { ref } from "vue";

const value = ref("2021-10-29");
const holidays = [
  "2021-10-01",
  "2021-10-02",
  "2021-10-03",
  "2021-10-04",
  "2021-10-05",
  "2021-10-06",
  "2021-10-07",
];

const isHoliday = ({ dayjs }) => {
  return holidays.includes(dayjs.format("YYYY-MM-DD"));
};

const rules = reactive<FormRules>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "Please select Activity zone",
      trigger: "change",
    },
  ],
  count: [
    {
      required: true,
      message: "Please select Activity count",
      trigger: "change",
    },
  ],
  date1: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  date2: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
  type: [
    {
      type: "array",
      required: true,
      message: "Please select at least one activity type",
      trigger: "change",
    },
  ],
  resource: [
    {
      required: true,
      message: "Please select activity resource",
      trigger: "change",
    },
  ],
  desc: [
    { required: true, message: "Please input activity form", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>


<style scoped>
h3 {
  margin-left: 20px;
}
.NewActivity {
  height: 80px;
  line-height: 80px;
  margin-bottom: 20px;
  border: 0.1px rgba(187, 185, 185, 0.496) solid;
}
.BasicInformation {
  border: 0.1px rgba(187, 185, 185, 0.496) solid;
  padding: 20px;
}
.el-form {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 40px;
}
.demo-date-picker span {
  margin-right: 12px;
  font-size: 14px;
  font-weight: 100;
}
.DiscountOverlay span {
  margin-right: 15px;
  font-size: 14px;
  font-weight: 100;
}
.DiscountProductList p {
  margin-bottom: 20px;
}
.DiscountProductList {
  margin-top: 20px;
}
</style>